<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单确认</title>
    <link rel="shortcut icon" href="./../../favicon.ico">
    <link rel="stylesheet" href="../../style/cart/shoppingCart.css">
    <script type="text/javascript" src="./../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="./../../plugins/vue/vue.js"></script>
    <script type="text/javascript" src="./../../plugins/axios/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./../../plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="./../../plugins/element-ui/index.js"></script>
    <!-- 引入layer -->
    <script src="../../plugins/layer-master/dist/layer.js"></script>
    <style>
        .el-table {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <nav class="public-header">
        <a href="../../index.html">网站首页</a>
        <a href="">我的订单</a>
        <a href="">我的地址</a>
    </nav>
    <!--显示地址信息-->
    <dvi class="order">
        <!--展示我的地址-->
        <div id="show_order">
            <button @click="save_form.dialogSaveFormVisible=true">添加新地址</button>
            <ol>
                <li v-for="address in my_address">
                    收货人：{{address.name}}&nbsp;&nbsp;
                    手机号：{{address.phone}}&nbsp;&nbsp;
                    地址：{{address.address}}&nbsp;&nbsp;
                    是否常用地址：{{address.state - 0 === 1 ? '是' : '否'}}&nbsp;&nbsp;
                </li>
            </ol>
        </div>
    </dvi>
    <div class="cart">
        <template>
            <el-table
                    ref="multipleTable"
                    :data="my_carts"
                    tooltip-effect="dark"
                    style="width: 87%"
            >

                <el-table-column
                        label="商品"
                        width="220"
                        align="center"
                >
                    <template slot-scope="scope">
                        <img width="120px" :src=`http:${scope.row.imageName}`>
                    </template>
                </el-table-column>
                <el-table-column
                        label="书名"
                        align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="120"
                        align="center"
                >
                    <template slot-scope="scope">￥{{ scope.row.price }}元</template>
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="数量"
                        width="120"
                        align="center"
                >
                    <template slot-scope="scope">￥{{ scope.row.number }}个</template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="小计"
                        show-overflow-tooltip
                        align="center"
                        width="120"
                >
                    <template slot-scope="scope">￥{{ (scope.row.price * scope.row.number).toFixed(2) }}元</template>
                </el-table-column>
            </el-table>
            <div class="cart-btn"><span>总价：</span><span> ¥{{totalPrice.toFixed(2)}} </span>
                <button class="btn" @click="pay">结算</button>
            </div>
        </template>
        <!-- 页脚部分 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 加中实训</p>
                </div>
            </div>
        </div>
    </div>

    <!--书写添加新地址的模态框-->
    <el-dialog title="添加新收获地址" :visible.sync="save_form.dialogSaveFormVisible">
        <el-form :model="save_form">
            <el-form-item label="收货人姓名" label-width="200px">
                <el-input v-model="save_form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货人手机号" label-width="200px">
                <el-input v-model="save_form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" label-width="200px">
                <el-input v-model="save_form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否默认地址" label-width="200px">
                <el-radio-group v-model="save_form.state">
                    <el-radio :label="0">非常用地址</el-radio>
                    <el-radio :label="1">常用地址</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="save_form.dialogSaveFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="saveAddress">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                my_carts: [], // 我的购物车
                my_address: [], // 我的地址
                save_form: {
                    dialogSaveFormVisible: false,
                    name: '',
                    address: '',
                    phone: '',
                    state: 0 // 非常用
                },
                totalPrice: 0, // 总价
            }
        },
        methods: {
            // 加载我的购物车
            loadMyCart() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8000/shopping_cart/find_cart_user',
                    headers: {
                        token: localStorage.getItem('front_token')
                    }
                }).then(resp => {
                    console.log(resp.data)
                    if (!resp.data.success) {
                        this.$message({
                            message: '请登录后访问购物车',
                            type: 'error',
                            duration: 2000,
                            onClose: () => {
                                location.href = '../login/login.html'
                            }
                        });
                        return
                    }
                    this.my_carts = resp.data.data
                    // 计算总价
                    this.my_carts.forEach(e => {
                        this.totalPrice += e.number * e.price
                    })
                })
            },
            // 加载当前用户的地址信息
            loadMyAddress() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8000/address',
                    headers: {
                        token: localStorage.getItem('front_token')
                    }
                }).then(resp => {
                    this.my_address = resp.data.data
                })
            },
            // 保存新地址
            saveAddress() {
                // 封装请求数据
                let data = new URLSearchParams()
                data.append('name', this.save_form.name)
                data.append('address', this.save_form.address)
                data.append('phone', this.save_form.phone)
                data.append('state', this.save_form.state)
                axios({
                    method: 'post',
                    url: 'http://localhost:8000/address/save',
                    headers: {
                        token: localStorage.getItem('front_token')
                    },
                    data: data
                }).then(resp => {
                    if (resp.data.success) {
                        // 刷新地址列表
                        this.loadMyAddress()
                        // 关闭弹窗
                        this.save_form.dialogSaveFormVisible = false
                    }
                })
            },
            // 支付
            pay() {
                location.href = 'http://localhost:8000/order/save?token=' + localStorage.getItem('front_token')
                /*axios({
                    method: 'post',
                    url: 'http://localhost:8000/order/save',
                    headers: {
                        token: localStorage.getItem('front_token')
                    }
                }).then(resp => {
                    alert(resp.data.data)
                })*/
            }
        },
        created() {
            this.loadMyAddress()
            this.loadMyCart()
        }
    })
</script>
</body>
</html>
